import { Toast } from 'antd-mobile';
import React, { useEffect } from 'react'
import { DotLoading } from 'antd-mobile'
let map
export default function index() {

    function getCurrentPosition() {
        let show = Toast.show({
            duration: 0,
            icon: <DotLoading color='white' />,
            content: "定位正在获取中请稍后...",
            maskClickable: false
        })
        return new Promise((resolve, reject) => {
            var geolocation = new BMapGL.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                show.close()
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var p2 = new BMapGL.Point(r.point.lng, r.point.lat);
                    resolve(p2)
                }
                else {
                    reject("本地定位获取失败")
                }
            });
        })
    }
    function initMap() {
        // 初始化地图实例
        map = new window.BMapGL.Map("container");
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        var scaleCtrl = new window.BMapGL.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);
        var myGeo = new window.BMapGL.Geocoder();
        var point = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);

        // // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint("河北省保定市莲池区长城北大街2116号", async function (point) {
            if (point) {
                try {
                    //自己的定位
                    let p = await getCurrentPosition()
                    //路线
                    var driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
                    driving.search(p, point);
                } catch (e) {
                    Toast.show({
                        icon: "fail",
                        content: e
                    })
                }

                map.centerAndZoom(point, 15);
                var opts = {
                    width: 250,     // 信息窗口宽度
                    height: 100,    // 信息窗口高度
                    title: ` <div style= 'font-size: 18px' >保定胸外专科医院 </div>`  // 信息窗口标题
                }
                var infoWindow = new BMapGL.InfoWindow("地址：河北省保定市莲池区长城北大街2116号", opts);  // 创建信息窗口对象
                map.openInfoWindow(infoWindow, point);        // 打开信息窗口
                //显示图片
                map.addOverlay(new window.BMapGL.Marker(point))
                map.addEventListener('click', function (e) {
                    let multiple = 0.0015
                    let { lat, lng } = point
                    if (e.latlng.lng >= lng - multiple && e.latlng.lng < lng + multiple && e.latlng.lat >= lat - multiple && e.latlng.lat < lat + multiple) {
                        map.openInfoWindow(infoWindow, point);        // 打开信息窗口
                    }
                });


            } else {
                alert('您选择的地址没有解析到结果！');
            }
        }, "河北省")

    }
    useEffect(() => {
        //更改默认手机端配置
        let metas = document.querySelectorAll("meta")
        let meta
        for (let i = 0, len = metas.length; i < len; i++) {
            if (metas[i].name === "viewport") {
                meta = metas[i]
                break
            }
        }
        meta.setAttribute("content", "initial-scale=1.0, user-scalable=no")
        initMap()
        return () => {
            meta.setAttribute("content", "initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no")
        }
    }, [])
    return (
        <div id="container" style={{ height: "calc(100vh - 2.5rem)" }}></div>
    )
}
